<!DOCTYPE html>
<html class="no-js">
<head>
  <base href="http://www.flywithme.top//">
  <script>
    document._writeOriginal = document.write;
    document.write = function(str) {
        if (str.indexOf('livereload.js') > -1) {
            document._writeOriginal(str);
        } else {
            document._writeOriginal('<!-- Be Hijack!! -->');
        }
    }
  </script>
  <title>使用hugo搭建个人博客站点 - Fly With Me</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="Hugo,博客,搭建,部署,使用,教程,说明,迁移,">
<meta name="description" content="
转载 from: coderzh


Hugo是一个用Go语言编写的静态网站生成器，它使用起来非常简单，相对于Jekyll复杂的安装设置来说，Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。

">
<meta name="author" content="brasbug">
<meta name="publisher" content="brasbug">
<meta name="generator" content="http://gohugo.io/"/>

<meta itemprop="name" content="使用hugo搭建个人博客站点 - Fly With Me">
<meta itemprop="description" content="
转载 from: coderzh


Hugo是一个用Go语言编写的静态网站生成器，它使用起来非常简单，相对于Jekyll复杂的安装设置来说，Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。

">
<meta itemprop="image" content="http://www.flywithme.top//public/coderjk.jpg">

<meta property="og:title" content="使用hugo搭建个人博客站点 - Fly With Me" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.flywithme.top/2015/08/29/hugo/" />
<meta property="og:image" content="http://www.flywithme.top//public/coderjk.jpg" />
<meta property="og:description" content="
转载 from: coderzh


Hugo是一个用Go语言编写的静态网站生成器，它使用起来非常简单，相对于Jekyll复杂的安装设置来说，Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。

">

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@brasbug">
<meta name="twitter:title" content="使用hugo搭建个人博客站点 - Fly With Me">
<meta name="twitter:description" content="
转载 from: coderzh


Hugo是一个用Go语言编写的静态网站生成器，它使用起来非常简单，相对于Jekyll复杂的安装设置来说，Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。

">
<meta name="twitter:creator" content="@brasbug">
<meta name="twitter:image" content="http://www.flywithme.top//public/coderjk.jpg">

  <script>document.documentElement.className = document.documentElement.className.replace("no-js", "js");</script>
  <link rel="canonical" href="http://www.flywithme.top/2015/08/29/hugo/">
  <link rel='shortlink' href="http://www.flywithme.top/2015/08/29/hugo/"/>
  <link rel="shortcut icon" href="http://www.flywithme.top//public/coderjk.ico"/>
  
<link rel="stylesheet" id="human-style-css" href="http://www.flywithme.top/wp-content/themes/hueman/style.css" type="text/css" media="all"/>
<link rel="stylesheet" id="human-style-css2" href="http://www.flywithme.top/wp-content/themes/hueman-child/style.css" type="text/css" media="all"/>
<link rel="stylesheet" id="responsive-css" href="http://www.flywithme.top/wp-content/themes/hueman/responsive.css" type="text/css" media="all"/>
<link rel="stylesheet" id="font-awesome-css" href="http://www.flywithme.top/wp-content/themes/hueman/fonts/font-awesome.min.css" type="text/css" media="all"/>
<link rel="stylesheet" href="http://www.flywithme.top/public/highlight/styles/github.css">
<script src="http://www.flywithme.top/public/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link rel="stylesheet" id="human-style-css3" href="http://www.flywithme.top/wp-content/themes/hueman-child/user.css" type="text/css" media="all"/>
<link rel="stylesheet" href="public/font/hack/css/hack.min.css">

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="wp-content/themes/hueman/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="wp-content/themes/hueman/js/scripts.js"></script>
<script type="text/javascript" src="assets/picturefill/picturefill.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.matchHeight-min.js"></script>
<script type="text/javascript" async defer src="assets/js/myblog.js"></script>

</head>

<body class="single single-post single-format-standard col-3cm full-width topbar-enabled chrome">
<div id="wrapper">
  <header id="header">

  <nav class="nav-container group" id="nav-topbar">
    <div class="nav-toggle"><i class="fa fa-bars"></i></div>
    <div class="nav-text"></div>
    <div class="nav-wrap container">
      <a rel="nofollow" href="http://www.flywithme.top//" class="nav-cs-icon">
        <img width="40" height="40" src="http://www.flywithme.top/public/coderjk.jpg" alt="brasbug" title="Home">
      </a>
      <ul id="menu-default-menu" class="nav container-inner group">
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/">首页</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/">技术文章</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E6%80%9D%E8%80%83%E6%84%9F%E6%82%9F/">思考感悟</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a>
        </li>
        
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/post/">归档</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/about/">关于我</a>
        </li>
        
        
          
        
        <li class="menu-item menu-item-type-post_type menu-item-text">
        浪尖一滴水,引领一片潮
        </li>
      </ul>
    </div>

    <div class="container">
      <div class="container-inner">
        <div class="toggle-search"><i class="fa fa-search"></i></div>
        <div class="search-expand">
          <div class="search-expand-inner">
            <form method="get" class="searchform themeform" action="https://www.google.com/search">
              <div>
                <input type="text" class="search" name="q" placeholder="Press enter to start searching">
              </div>
            </form>
          </div>
        </div>
      </div>
      
    </div>
    

  </nav>
  

  <div class="container group">
    <div class="container-inner">

      <div class="group pad">

        <div class="group pad">
          <h1 class="site-title">
            <a rel="nofollow" href="http://www.flywithme.top//" rel="home">
              <img style="border-radius: 50%;width:72px;height:72px;margin:0 auto;" alt="brasbug" src="http://www.flywithme.top/public/coderjk.jpg"></img>
              Fly With Me
            </a>
          </h1>
          <p class="site-description"> 漫步走在沙滩上 </p>
        </div>

      </div>
    </div>
    
  </div>
  

</header>



  <div class="container" id="page">
    <div class="container-inner">
      <div class="main">
        <div class="main-inner group">
          <section class="content">
            <div class="page-title pad group">
              <ul class="meta-single group">
                
                <li class="category">
                  <a href="http://www.flywithme.top/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/" rel="category tag">技术文章</a>
                </li>
                
              </ul>
            </div>

            <div class="pad group">

              <article
                  class="post type-post status-publish format-standard has-post-thumbnail hentry category-australien tag-bondi-beach tag-city2surf tag-sydney">
                <div class="post-inner group">

                  <h1 class="post-title">使用hugo搭建个人博客站点</h1>

                  <p class="post-byline">
                    by  · 2015年08月29日 · 5217 Words ·
                    ~11min reading time |
                    <a href="https://github.com/brasbug/brasbug-hugo-blog/tree/master/content/post/2015/2015-08-29-Hugo.md"
                       target="_blank">Improve on <i class="fa fa-github"></i></a>
                  </p>

                  <div class="clear"></div>

                  <div class="entry">
                    <div class="entry-inner">
                      
                      <blockquote>
<p>转载 from: <a href="http://blog.coderzh.com/2015/08/29/hugo/">coderzh</a></p>
</blockquote>

<p>Hugo是一个用Go语言编写的静态网站生成器，它使用起来非常简单，相对于Jekyll复杂的安装设置来说，Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。</p>

<p></p>

<p>Hugo生成静态页面的效率很高，我的260多篇博客文章生成几乎是瞬间完成的，而之前用Jekyll需要等待10秒左右。</p>

<p>Hugo自带watch的调试模式，可以在我修改MarkDown文章之后切换到浏览器，页面会检测到更新并且自动刷新，呈现出最终效果，能极大的提高博客书写效率。再加上Hugo是使用Go语言编写，已经没有任何理由不使用Hugo来代替Jekyll作为我的个人博客站点生成器了。</p>

<h3 id="静态网站生成器">静态网站生成器</h3>

<p>什么是静态网站生成器？如果追溯到最早的网站形式，那时候的网页都是静态的，即一个内容不变的html文件放在服务器上，人们通过互联网访问浏览的都是这个一成不变的页面。后来，人们发现，需要和网页进行交互，能根据用户的输入动态呈现出相应的内容，这就是动态网站。那，为什么现在又回归使用静态网站呢？特别是对于博客网站这种特殊的形式。我的理解是：</p>

<ol>
<li>访问速度提升。静态页面不需要像动态页面那样经常去查询数据库，而是直接将最终页面内容返回。</li>
<li>搜素引擎友好。便于搜索引擎索引，比如很多动态网站的页面地址是一样的，只是后面传入的参数不一样，容易让搜索引擎误认为是同一个页面。（虽然不会）</li>
<li>可以完全抛弃数据库，减少复杂度，将最复杂的一步交给静态网站生成器，自己只专注写作、生成、发布三个步骤。</li>
<li>博客文章可以以文本文件的方式（MarkDown）在本地维护管理，不需要像之前那样在网页的编辑器里提交到网站数据库。你可以方便的使用github管理你的博客文章，不会丢失，又能追溯到每一次的内容变更。</li>
</ol>

<p>目前最流行的静态网站生成器是Jekyll，它是github创始人自己实现的一套ruby的静态网站生成器。一经推出，各个程序哥竞相效仿，一时间使用Jekyll搭建自己的博客变成了一件很高逼格的事情。</p>

<p>我也是跟风者之一，在Jekyll之前，我主要也是在博客园写文章，同时独立博客这块也尝试过自己实现的博客程序，用GAE写过，后来又用Tornado写过，都是动态网站。自己实现博客程序，总是在开始一段时间内很狂热，当一切实现完成，细节修缮好之后很快就失去了兴趣。因为你的注意力从只是写文章，经常转移到其他地方去。比如网站不好看，需要去改一改网站的风格样式，修复BUG，加一加功能等等。</p>

<p>所以，如果只是专注于写作，还是找一个稳定一些，提供大量现成皮肤，有稳定专业的组织维护更新的博客系统。使用Jekyll确实让我眼前一亮，原来博客程序可以这么玩。于是利用周末的时间，我将我之前所有的文章，包括博客园的文章，都迁移到了Jekyll上来。自从有了Jekyll，我终于可以开开心心的专注的写文章了，而且使用喜欢的MarkDown格式。：）</p>

<p>在使用了Jekyll一段时间后，它的问题也逐渐暴露出来：静态页面生成的效率不够高。因为我把以前的文章都导入了过来，一共有260来篇，每次编辑文章后，需要等等10秒，待它将所有页面检查并生成完成之后，才能看到最终的效果。这是我最不能忍受的一点。对于初学者，Jekyll还有很多问题，比如环境搭建非常复杂，导致使用Jekyll的人大都是一些喜欢折腾，不怕折腾的程序哥。</p>

<p>随着Go1.5版本的发布，让我意识到是时候好好玩一玩Go语言了。使用Go语言实现的静态网站生成器Hugo（雨果）立即吸引了我，它解决了我最大的痛点：生成的效率。文档、社区各方面的支持都不错，使用起来非常简单，各种皮肤直接套用，于是我又开始了Jekyll迁移到Hugo的漫漫长路。（一个周末的时间）</p>

<p><del>即使迁移到了Hugo，我还保留着原来的Jekyll博客，只是不会再更新了，用来怀念？还是哪天突然又跳回来也不一定。</del></p>

<p><del>我的Jeklly博客：<a href="http://jekyll.coderzh.com">http://jekyll.coderzh.com</a></del> Update(2015-09-20): 觉得没啥用了，还是干掉了</p>

<p>我的Hugo博客：<a href="http://blog.coderzh.com/">http://blog.coderzh.com/</a></p>

<h3 id="github-pages">GitHub Pages</h3>

<p>使用静态网站生成器生成好静态页面之后，需要把文件放到服务器上供别人浏览。比较传统的方式是租用VPS虚拟服务器，比如：linode、digitalocean。将生成好的静态页面手工上传到服务器上。如果你习惯这种方式部署，推荐你使用<a href="https://www.digitalocean.com/?refcode=e131e2bba197">digitalocean</a>。</p>

<p>当然， 还有更好的方式，就是直接把网站托管到GitHub Pages。你只需要在GitHub上创建一个项目，然后将生成出来的静态页面文件push到这个项目的gh-pages分支，保证根目录有一个index.html文件即可。这样，一个免费、无限流量的博客系统就搭建完成了。同时，通过github你可以方便对博客文章进行管理和追踪。</p>

<h3 id="hugo">Hugo</h3>

<p>前面的铺垫介绍的差不多了，该主角上场了。Hugo是什么？它主要做了什么？</p>

<ol>
<li>Hugo只有一个二进制文件（比如Windows里只是一个hugo.exe）</li>
<li>Hugo可以将你写好的MarkDown格式的文章自动转换为静态的网页。</li>
<li>Hugo内置web服务器，可以方便的用于本地调试。</li>
</ol>

<h3 id="hello-hugo">Hello Hugo</h3>

<p>Hugo官方主页：<a href="https://gohugo.io/">https://gohugo.io/</a></p>

<p>Hugo的安装方式有两种，一种是直接下载编译好的Hugo二进制文件。如果只是使用Hugo推荐用这种方式。另一种方式是获取Hugo的源码，自己编译。由于各种不可预料的网络问题，第二种方式不是那么轻易能成功，虽然最后我还是折腾出来了。</p>

<p>Hugo二进制下载地址：<a href="https://github.com/spf13/hugo/releases">https://github.com/spf13/hugo/releases</a></p>

<p>下载下来后，只有一个叫hugo或者hugo.exe的程序，接下来开始生成自己的站点：</p>

<pre><code class="language-bash">$ hugo new site mysite
</code></pre>

<p>然后hugo会自动生成这样一个目录结构：</p>

<pre><code class="language-bash">  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
    config.toml
</code></pre>

<p>简要介绍一下，config.toml是网站的配置文件，这是一个TOML文件，全称是Tom&rsquo;s Obvious, Minimal Language，这是它的作者GitHub联合创始人Tom Preston-Werner 觉得YAML不够优雅，捣鼓出来的一个新格式。如果你不喜欢这种格式，你可以将config.toml替换为YAML格式的config.yaml，或者json格式的config.json。hugo都支持。</p>

<p>content目录里放的是你写的markdown文章，layouts目录里放的是网站的模板文件，static目录里放的是一些图片、css、js等资源。</p>

<p>进入生成的site目录：</p>

<pre><code class="language-bash">$ cd mysite
</code></pre>

<p>创建一个页面：</p>

<pre><code class="language-bash">$ hugo new about.md
</code></pre>

<p>如果是博客日志，最好将md文件放在content的post目录里。</p>

<pre><code class="language-bash">$ hugo new post/first.md
</code></pre>

<p>执行完后，会在content/post目录自动生成一个MarkDown格式的first.md文件：</p>

<pre><code>+++
date = &quot;2015-01-08T08:36:54-07:00&quot;
draft = true
title = &quot;first&quot;
 
+++
</code></pre>

<p>+++可以替换为Jekyll一样的---，里面的内容是这篇文章的一些信息。下面就可以开始写你的文章内容，比如：</p>

<pre><code>+++
date = &quot;2015-01-08T08:36:54-07:00&quot;
draft = true
title = &quot;first&quot;
 
+++

### Hello Hugo

 1. aaa
 1. bbb
 1. ccc

</code></pre>

<p>OK，刚才的about.md也有内容，该看看最后的效果了。然后你屁颠屁颠的使用hugo server启动，打开浏览器里一看，发现毛都没有！这是肿么了！</p>

<p>这是Hugo对初学者非常不友好的地方，默认生成的网站是没有任何皮肤模板的。为了看看第一个写的示例，还得去Github上把一个网页模板下载下来。如果你网络够好，网速够快，你可以在刚才的目录将Hugo官方的所有模板都下载下来：</p>

<pre><code class="language-bash">$ git clone --recursive https://github.com/spf13/hugoThemes themes
</code></pre>

<p>我尝试过，也失败过，且从未成功一次性将所有的模板下载下来。所以，我们还是老老实实只下载其中一个模板来看看效果吧：</p>

<pre><code class="language-bash">$ cd themes
$ git clone https://github.com/spf13/hyde.git
</code></pre>

<p>启动本地调试：</p>

<pre><code class="language-bash">$ hugo server --theme=hyde --buildDrafts --watch
</code></pre>

<p>浏览器里打开：<a href="http://127.0.0.1:1313">http://127.0.0.1:1313</a></p>

<p><img src="sources/hugo/HugoFirstPost.png" alt="HugoFirstPost" /></p>

<p>&ndash;watch或者-w 选项打开的话，将会监控到文章的改动从而自动去刷新浏览器，不需要自己手工去刷新浏览器，非常方便。</p>

<p>如果你看了上面的说明已经有冲动去试一试Hugo了，我的目的也算达到了，接下来你需要的只是查看官方的说明文档就够了，所以具体的一些设置我就不重复了。</p>

<p>官方文档：<a href="https://gohugo.io/overview/introduction/">https://gohugo.io/overview/introduction/</a></p>

<p>皮肤列表：<a href="https://github.com/spf13/hugoThemes">https://github.com/spf13/hugoThemes</a></p>

<p>常用文档：</p>

<ol>
<li><a href="https://gohugo.io/overview/configuration/">Configuring Hugo</a></li>
<li><a href="https://gohugo.io/content/front-matter/">Front Matter</a></li>
<li><a href="https://gohugo.io/extras/menus/">Menus</a></li>
<li><a href="https://gohugo.io/templates/variables/">Template Variables</a></li>
<li><a href="https://gohugo.io/tutorials/github-pages-blog/">Hosting on GitHub Pages</a></li>
</ol>

<h3 id="遇到的问题">遇到的问题</h3>

<ol>
<li>默认的ServerSide的代码着色会有问题，有些字的颜色会和背景色一样导致看不见。<br />
解决方法：使用ClientSide的代码着色方案即可解决。（见：<a href="https://gohugo.io/extras/highlighting/#client-side:c4210b265c792cac9a6cf6a5f53b671d">Client-side Syntax Highlighting</a>）</li>
<li>URL全部被转成了小写，如果是旧博客迁移过来，将是无法接受的。<br />
解决方法：<del>我是直接改了Hugo的代码，将URL强制转换为小写那段逻辑去掉了，之后考虑在config里提供配置开关，然后给Hugo提一个PR。如果是Windows用户可以直接<a href="https://github.com/coderzh/ConvertToHugo">https://github.com/coderzh/ConvertToHugo</a> 下载到我修改后的版本myhugo.exe。</del><br />
Update(2015-09-03): 已经提交<a href="https://github.com/spf13/hugo/pull/1392">PR</a>并<a href="https://github.com/spf13/hugo/commit/52d94fa67578f6b63035e73b236ca8abd40d0006">commit</a>到Hugo，最新版本只需要在config里增加：<br />
<code>disablePathToLower: true</code></li>
<li>文章的内容里不能像Jekyll一样可以内嵌代码模板了。最终会生成哪些页面，有一套相对固定而复杂的规则，你会发现想创建一个自定义界面会非常的困难。<br />
解决方法：无，看文档，了解它的规则。博客程序一般也不需要特别的自定义界面。Hugo本身已经支持了类似posts, tags, categories等内容聚合的页面，同时支持rss.xml，404.html等。如果你的博客程序复杂到需要其他的页面，好好想想是否必须吧。</li>
<li>如何将rss.xml替换为feed.xml？<br />
解决方法：在config.yaml里加入：
<code>
rssuri: &quot;feed.xml&quot;
</code></li>
</ol>

<h3 id="jekyll迁移到hugo">Jekyll迁移到Hugo</h3>

<p>Jekyll的文章内容迁移到Hugo中，大部分内容是兼容的，但也有一些地方是不兼容的。主要有以下几个地方需要修改：</p>

<ol>
<li>Jekyll文章能从文件名里的日期部分读取到日期，并将剩余的部分当做的页面url的名称，比如：2015-08-29-first.md。而Hugo只认md文件里的date字段，url的名称如果用文件名的话将会使用完整的文件名（不会去除日期部分）。为了兼容，必须在md的Front Matter里写入url字段，用来说明该页面的相对url地址，从而保持兼容。</li>
<li>tags, categories等字段必须用列表的方式，不像Jekyll中那样随意了。</li>
<li>{% raw %} {% endraw %}将不需要了。</li>
<li>{% highlight ruby %} 变成了{{&lt; highlight ruby &gt;}} 。不过我还是推荐使用``` ruby ```形式，然后使用ClientSide的Highlight，这样两边都兼容。</li>
<li>需要将Jekyll里的public里的文件拷贝到Hugo的static目录里。</li>
<li>Jekyll的文章必须放到Hugo的content/post目录里。</li>
<li>Jekyll只需要push文章内容到github，服务器会自动生成静态页面。毕竟是github的亲儿子。而Hugo需要你将生成的public目录里的内容做为gh-pages分支push上去。具体的简便的方法见：<a href="https://gohugo.io/tutorials/github-pages-blog/">Hosting on GitHub Pages</a></li>
</ol>

<p>假如你之前的博客和我一样是Jekyll的，可以尝试使用我写的<a href="https://github.com/coderzh/ConvertToHugo/blob/master/ConvertToHugo.py">ConvertToHugo.py</a> 工具。这个转换工具逻辑相对比较简单和清晰，如果满足不了你的需求你也可以轻易在此基础上做些修改，如果我能收到PR当然是最好了。</p>

<p>反正，我是完全使用CovertToHugo.py将我原来的Jekyll博客全部转过来了。而且，我找到了一个非常炫酷的主题，并且在此基础稍微修改下。</p>

<p><img src="sources/hugo/HugoBlog.jpg" alt="HugoBlog" /></p>

<p>Blog地址：<a href="http://blog.coderzh.com">http://blog.coderzh.com</a></p>

<p>Github: <a href="https://github.com/coderzh/coderzh-hugo-blog">https://github.com/coderzh/coderzh-hugo-blog</a></p>

<p><strong>Update(2015-10-08) 国庆在家给Hugo提了个PR，已经将Jekyll迁移功能集成到了Hugo里，pull最新的Hugo代码，编译Hugo，然后可以执行：</strong></p>

<pre><code class="language-bash">$ hugo import jekyll YourJekyllDir TargetDir
</code></pre>

<p>将自动把你的Jekyll站点转换成Hugo的站点。欢迎试用并反馈。</p>

<h3 id="关于部署">关于部署</h3>

<p>假设你需要部署在 <code>GitHub Pages</code> 上，首先在GitHub上创建一个Repository，命名为：<code>coderzh.github.io</code> （coderzh替换为你的github用户名）。</p>

<p>在站点根目录执行 <code>Hugo</code> 命令生成最终页面：</p>

<pre><code class="language-bash">$ hugo --theme=hyde --baseUrl=&quot;http://coderzh.github.io/&quot;
</code></pre>

<p>如果一切顺利，所有静态页面都会生成到 <code>public</code> 目录，将pubilc目录里所有文件 <code>push</code> 到刚创建的Repository的 <code>master</code> 分支。</p>

<pre><code class="language-bash">$ cd public
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m &quot;first commit&quot;
$ git push -u origin master
</code></pre>

<p>浏览器里访问：<code>http://coderzh.github.io/</code></p>

<p>自动部署的脚本可以参考我的Repo里的<code>deploy.py</code>脚本：<a href="https://github.com/coderzh/coderzh-hugo-blog">https://github.com/coderzh/coderzh-hugo-blog</a></p>

<p>全自动化部署到GitHub和GitCafe，见我的另一篇博客：<a href="http://blog.coderzh.com/2015/09/13/use-webhook-automated-deploy-hugo/">通过webhook将Hugo自动部署至GitHub Pages和GitCafe Pages</a></p>

<h3 id="hugo中文文档">Hugo中文文档</h3>

<p>Hugo中文文档网站：<a href="http://www.gohugo.org/">http://www.gohugo.org/</a> 已上线， 并且在不断完善中，欢迎访问。</p>

<blockquote>
<p>转载 from: <a href="http://blog.coderzh.com/2015/08/29/hugo/">coderzh</a></p>
</blockquote>
                      
                    </div>
                    <div style="border: 1px dashed #e0e0e0; padding: 10px 10px 10px 10px; background-color: #fffeee; background-repeat: no-repeat; background-attachment: scroll; background-position: 1% 50%; -moz-background-size: auto auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
                        <div style="float:left;margin-top:0px;">
                        <img src="http://www.flywithme.top/public/qrcode.jpg" width="129px" height="129px"/>
                        <div style="text-align:center;">微信扫一扫</div>
                        </div>
                        <div>
                            <p style="margin-top:0px;">作者：<a target="_blank" href="http://blog.flywithme.top/">Brasbug</a>
                            <br />微信关注：Crime_Sence (我在案发现场）
                            <br />本文出处：<a target="_blank" href="http://www.flywithme.top/2015/08/29/hugo/">http://www.flywithme.top/2015/08/29/hugo/</a>
                            <br />
                            文章版权归本人所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 </p>
                        </div>
                    </div>
                    <div class="clear"></div>
                  </div>
                  

                </div>
                
              </article>
              

              <div class="clear"></div>

              <p class="post-tags">
                <span>Tags:</span>
                
              </p>

              <h4 class="heading">
  <i class="fa fa-hand-o-right"></i>Related posts</h4>

    <ul class="related-posts group">
    
    
    
        
        
        
    
        
        
        
    
        
        
        
    
        
        
        
    
        
        
        
    
    </ul>



              <section id="comments" class="themeform">
<div class="ds-thread" data-thread-key="/2015/08/29/hugo/" data-title="使用hugo搭建个人博客站点" data-url="http://www.flywithme.top/2015/08/29/hugo/"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"brasbug"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
</script>
</section>


              
            </div>


          </section>
          <div class="sidebar s1">
  <a class="sidebar-toggle" title="Expand Sidebar"><i class="fa icon-sidebar-toggle"></i></a>
  <div class="sidebar-content">
    <div class="sidebar-top group">
      <p>Follow:</p>
      <ul class="social-links">
    <li>
    <a class="social-tooltip" title="On WeiBo"
        href="http://weibo.com/u/2144561657?refer_flag=1005055013_&is_all=1" target="_blank">
        <i class="fa fa-weibo"></i>
    </a>
    </li>
    
    
        
        
    
    
    <li>
    <a class="social-tooltip" title="On GitHub"
        href="https://github.com/brasbug" target="_blank">
        <i class="fa fa-github"></i>
    </a>
    </li>
</ul>

    </div>
    <div class="widget qrcode">
    <img src="http://www.flywithme.top/public/qrcode.jpg" alt="qrcode" width="172px" height="172px"/>
    <p> 微信扫一扫：<br/> 关注我的公众号： <br /> Crime_Scene <br /> 交流QQ群：185198503 </p>
</div>

    <ul class="post-nav group">
      <li class="next">
        
        <a href="http://www.flywithme.top/2015/08/17/appUpdate/" rel="next">
          <i class="fa fa-chevron-right"></i>
          <strong>Next post</strong>
          <span>iOS App检测AppStore更新</span>
        </a>
        
      </li>
      <li class="previous">
        
        <a href="http://www.flywithme.top/2015/09/15/OCCallJS/" rel="prev">
          <i class="fa fa-chevron-left"></i>
          <strong>Previous Post</strong>
          <span>iOS OC call JS</span>
        </a>
        
      </li>
    </ul>
    <div id="search-2" class="widget widget_search"><h3>Search</h3>
      <form method="get" class="searchform themeform" action="https://www.google.com/search">
        <div>
          <input type="text" class="search" name="q" placeholder="Press enter to start searching">
        </div>
      </form>
    </div>
  </div>
  
</div>

          <div class="sidebar s2">
  <a class="sidebar-toggle" title="Expand Sidebar"><i class="fa icon-sidebar-toggle"></i></a>
  <div class="sidebar-content">
    <div class="sidebar-top group">
      <p>More</p>
    </div>
    <div id="categories-2" class="widget widget_categories"><h3>Categories</h3>
      <ul>
        
          <li class="cat-item cat-item-1">
            <a rel="nofollow" href="http://www.flywithme.top/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a>
          </li>
        
          <li class="cat-item cat-item-1">
            <a rel="nofollow" href="http://www.flywithme.top/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/">技术文章</a>
          </li>
        
          <li class="cat-item cat-item-1">
            <a rel="nofollow" href="http://www.flywithme.top/categories/%E6%80%9D%E8%80%83%E6%84%9F%E6%82%9F/">思考感悟</a>
          </li>
        
          <li class="cat-item cat-item-1">
            <a rel="nofollow" href="http://www.flywithme.top/categories/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a>
          </li>
        
      </ul>
    </div>
  </div>
</div>

        </div>
      </div>
    </div>
  </div>
  <footer id="footer">

  <nav class="nav-container group" id="nav-footer">
    <div class="nav-toggle"><i class="fa fa-bars"></i></div>
    <div class="nav-text"></div>
    <div class="nav-wrap">
      <ul id="menu-default-menu-1" class="nav container group">
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/">首页</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/">技术文章</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E6%80%9D%E8%80%83%E6%84%9F%E6%82%9F/">思考感悟</a>
        </li>
        
        <li class="menu-item menu-item-type-post_type menu-item-object-page">
          <a rel="nofollow" href="http://www.flywithme.top/categories/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a>
        </li>
        
      </ul>
    </div>
  </nav>
  

  <section class="container" id="footer-bottom">
    <div class="container-inner">
      <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a>
      <div class="pad group">
        <div class="grid one-half">
          <div id="copyright">
            <p>Copyright © 2015. All Rights Reserved. <br>Powered by
              <a rel="nofollow" href="http://gohugo.io/" target="_blank">Hugo - the static site generator</a>.
              <a rel="nofollow" href="http://golang.org" target="_blank">#golang</a>.
            </p>
          </div>
          
        </div>
        
        <div class="grid one-half last">
          <ul class="social-links">
    <li>
    <a class="social-tooltip" title="On WeiBo"
        href="http://weibo.com/u/2144561657?refer_flag=1005055013_&is_all=1" target="_blank">
        <i class="fa fa-weibo"></i>
    </a>
    </li>
    
    
        
        
    
    
    <li>
    <a class="social-tooltip" title="On GitHub"
        href="https://github.com/brasbug" target="_blank">
        <i class="fa fa-github"></i>
    </a>
    </li>
</ul>

        </div>
      </div>

    </div>
    
  </section>
  

</footer>

</div>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-10147768-2', 'auto');
  ga('send', 'pageview');

  $('#messagesbsb').remove();

</script>
</body>
</html>

